<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>智能口罩</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
	<script type="text/javascript">
		var bluetoothDevice;
		var temperature;
		var humidity;
		var battery;

		// 连接蓝牙设备
		function connectBluetooth() {
			if (navigator.bluetooth) {
				navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
				.then(device => {
					bluetoothDevice = device;
					return device.gatt.connect();
				})
				.then(server => {
					server.getPrimaryService('battery_service')
					.then(service => service.getCharacteristic('battery_level'))
					.then(characteristic => characteristic.readValue())
					.then(value => {
						battery = value.getUint8(0);
						document.getElementById("battery").innerHTML = battery + "%";
					});
				})
				.catch(error => {
					console.log(error);
				});
			} else {
				console.log('Web Bluetooth API is not available.');
			}
		}

		// 显示温度湿度折线图
		function showChart() {
			var ctx = document.getElementById('chart').getContext('2d');
			var chart = new Chart(ctx, {
			    type: 'line',
			    data: {
			        labels: ['1', '2', '3', '4', '5', '6', '7'],
			        datasets: [{
			            label: 'Temperature °C',
			            data: [20, 19, 21, 23, 24, 22, 25],
			            backgroundColor: 'rgba(0, 119, 204, 0.3)',
			            borderColor: 'rgba(0, 119, 204, 0.8)',
			            borderWidth: 1,
			            fill: true
			        }, {
			            label: 'Humidity %',
			            data: [40, 42, 45, 47, 51, 53, 50],
			            backgroundColor: 'rgba(254, 206, 84, 0.3)',
			            borderColor: 'rgba(254, 206, 84, 0.8)',
			            borderWidth: 1,
			            fill: true
			        }]
			    },
			    options: {}
			});
		}
		
	</script>
</head>
<body onload="showChart()">
	<h1>智能口罩</h1>
	<div>
		<p>温度： <span id="temperature">--</span> °C</p>
		<p>湿度： <span id="humidity">--</span> %</p>
		<p>电量： <span id="battery">--</span></p>
	</div>
	<button onclick="connectBluetooth()">连接蓝牙设备</button>
	<br>
	<canvas id="chart"></canvas>
	<div>
		<p>德阳市罗江区智云优创新科技优先公司</p>
	</div>
</body>
</html>
